<template>
  <Card>
    <p slot="title">
        用户编辑
    </p>
    <Row>
      <Col span="16">
      <Form ref="formInline" :model="sysAccount">
        <FormItem prop="user" label="请输入用户账号">
          <Input type="text" v-model="sysAccount.loginAccount" placeholder="">
          </Input>
        </FormItem>
        <FormItem prop="user" label="请输入用户姓名">
          <Input type="text" v-model="sysAccount.userName" placeholder="">
          </Input>
        </FormItem>
        <FormItem prop="user" label="请选择用户角色">
          <Select v-model="userRoleId" multiple >
            <Option v-for="item in sysRoleList" :value="item.roleId" :key="item.roleId">{{ item.roleName }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="user" label="请选择机构">
          <DeptTree @treeClick="treeClickHandle" :value="selectDept" />
        </FormItem>
        <FormItem prop="user" label="请输入联系电话">
          <Input type="text" v-model="sysAccount.userTele" placeholder="请输入联系电话">
          </Input>
        </FormItem>
        <div class="form-bottom-btn">
          <Button type="primary" icon="save"  @click="save">保存</Button>
          <Button type="primary" ghost icon="arrow-back"   @click="back">返回</Button>
        </div>
      </Form>
      </Col>
    </Row>
  </Card>
</template>
<script>
import account from '@/api/sys/account'
import DeptTree from '_c/base/dept-tree'
export default {
  components: {
    DeptTree
  },
  props: {
    editUserAcctId:{
      type: String
    }  
  },
  data() {
    return {
      selectDept: [],
      showDeptSel:false,
      sysAccount:{
        userName:'',
        loginAccount:'',
        userAcctId:this.$route.params.userAcctId,
        sysDepartment:{}
      },
      sysRoleList:[],
      userRoleId:[],
      deptList:[],
      deptId:'',
      id:'',
    }
  },
  async created(){
    this.getUserInfo()
    //this.getDeptData(null,this.$store.getters.getUser.deptCode)
  },
  watch:{
    selectDept(oldVal, newVal){
      //console.log('--newVal',newVal)
    }
  },
  methods:{
    treeClickHandle(data){
      this.sysAccount.sysDepartment.deptId = data.id
      //console.log('--result--', data)
    },
    back(){
      this.$emit('editClose')
    },
    async save(){
      const result = await account.saveAccount(this.sysAccount, this.userRoleId.join(','))
      if(result.data.success){
        this.$Message.success('保存成功')
        this.$emit('editClose', true)
      } else {
        this.$Message.error('保存失败')
      }
      //console.log('--save--', result)
    },
    async getUserInfo(){
      //alert(this.editUserAcctId)
      const res = await account.getAccount(this.editUserAcctId);
      const data = res.data
      if (data.success) {
        this.sysAccount = data.sysAccount
        this.selectDept = []
        this.selectDept.push(this.sysAccount.sysDepartment.deptId)
        //console.log('sysAccount', this.sysAccount)
        this.userRolemap = data.userRolemap
        this.sysRoleList = data.sysRoleList
        this.userRoleId = data.userRoleId
      }

    },
  }

}
</script>
<style scoped>
.treeDiv{
  position: relative;
  top:-8px;
  border:1px solid #ccc;
  border-top:none;
  background-color: #fff;
}
</style>


